@extends('admin.common.framework') 
@section('heads')
<link rel="stylesheet" href="{{ env('APP_STATIC') }}vendor/cropper/dist/cropper.min.css">
<style>
    img {
        max-width: 100%;
        /* This rule is very important, please do not ignore this! */
    }
</style>
@endsection
 
@section('content')
<div class="row">
    <div class="col-lg-12">
        <h3 class="page-header" style="display:inline-block;">轮播图设置</h3>
        <span class="fa fa-fw fa-plus-circle fa-action slider-add-span" style="display:inline-block; font-size:18px;" data-toggle="modal" data-target="#slider-add-modal"
            data-type="home"></span>
    </div>
    <!-- /.col-lg-12 -->
</div>
<!-- /.row -->
@foreach( $list as $type => $li )
<div>
    <span style="display:inline-block;"><h4>{{ translate($type) }}</h4></span>
    <span class="fa fa-fw fa-plus-circle fa-action slider-add-span" style="display:inline-block; font-size:18px;" data-toggle="modal" data-target="#slider-add-modal"
        data-type="{{$type}}"></span>
</div>
<div class="row">
    @foreach( $li as $slider )
    <div class="col-lg-3 col-md-6 slider-card" id="slider-{{$slider['id']}}">
        <div class="panel">
            <div class="panel-heading @if($slider['status'] == 0) panel-opacity @endif">
                <div class="row slider-img-card" style="background-image: url('{{env("APP_UPLOAD").$slider["img"]}}'); height:150px;">
                    <div class="col-xs-3">
                    </div>
                    <div class="col-xs-9 text-right">
                        <div>
                            <h5>{{$slider['title']}}</h5>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-footer">
                <span class="pull-left fa fa-fw fa-edit fa-action slider-edit-span" data-toggle="modal" data-target="#slider-edit-modal"
                    data-type="{{$slider['type']}}" data-id="{{$slider['id']}}" data-title="{{$slider['title']}}" data-img="{{env('APP_UPLOAD').$slider['img']}}"
                    data-intro="{{$slider['intro']}}" data-status="{{$slider['status']}}" data-rank="{{$slider['rank']}}"></span>
                <span class="pull-right fa fa-close fa-fw fa-action slider-delete-span" data-id="{{$slider['id']}}"></span>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    @endforeach
</div>
@endforeach
<div>
    <!-- Modal -->
    <div class="modal fade" id="slider-add-modal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="addModalLabel">轮播图添加</h4>
                </div>
                <div class="modal-body" style="padding:30px;">
                    <div class="row">
                        <div class="col-lg-12">
                            <form role="form" id="slider-add-form">
                                {{ csrf_field() }}
                                <input type="hidden" name="path" value="">
                                <input type="hidden" name="crop" value="">
                                <div class="form-group">
                                    <label>类别</label>
                                    <select class="form-control" name="type">
                                            <option value="home" selected="selected">首页</option>
                                            <option value="login">登录页</option>
                                            <option value="register">注册页</option>
                                        </select>
                                </div>
                                <div class="form-group">
                                    <label>标题</label>
                                    <input class="form-control" name="title" type="text">
                                </div>
                                <div class="form-group">
                                    <label>描述</label>
                                    <input class="form-control" name="intro" type="text">
                                </div>
                                <div class="form-group">
                                    <label>排序</label>
                                    <input class="form-control" name="rank" type="number" value="0">
                                </div>
                                <div class="form-group">
                                    <label style="margin-right:25px;">显示</label>
                                    <label class="radio-inline">
                                        <input type="radio" name="status" id="status-1" value="1" checked>显示
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="status" id="status-0" value="0">隐藏
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label>图片</label>
                                    <input name="img" type="file" accept="image/gif,image/jpeg,image/png">
                                </div>
                                <div class="form-group form-preview" style="display:none;">
                                    <label>预览</label>
                                    <div class="img-preview preview-lg"></div>
                                </div>
                                <div class="form-group form-cropper" style="display:none;">
                                    <label>裁剪</label>
                                    <img src="" alt="" id="image" style="display:none;">
                                </div>
                                <div class="form-group form-cropper-control" style="display:none;">
                                    <button type="button" class="btn btn-primary btn-circle" onclick="cropimg.cropper('zoom',0.1)"><i class="fa fa-search-plus" ></i>
                                        </button>
                                    <button type="button" class="btn btn-primary btn-circle" onclick="cropimg.cropper('zoom',-0.1)"><i class="fa fa-search-minus" ></i>
                                        </button> &nbsp;&nbsp;
                                    <button type="button" class="btn btn-info btn-circle" onclick="cropimg.cropper('move',-10,0)"><i class="fa fa-arrow-left" ></i>
                                        </button>
                                    <button type="button" class="btn btn-info btn-circle" onclick="cropimg.cropper('move',10,0)"><i class="fa fa-arrow-right" ></i>
                                        </button>
                                    <button type="button" class="btn btn-info btn-circle" onclick="cropimg.cropper('move',0,-10)"><i class="fa fa-arrow-up" ></i>
                                        </button>
                                    <button type="button" class="btn btn-info btn-circle" onclick="cropimg.cropper('move',0,10)"><i class="fa fa-arrow-down" ></i>
                                        </button> &nbsp;&nbsp;
                                    <button type="button" class="btn btn-success btn-circle" onclick="cropimg.cropper('rotate',-5)"><i class="fa fa-rotate-left" ></i>
                                        </button>
                                    <button type="button" class="btn btn-success btn-circle" onclick="cropimg.cropper('rotate',5)"><i class="fa fa-rotate-right" ></i>
                                        </button> &nbsp;&nbsp;
                                    <button type="button" class="btn btn-warning btn-circle" onclick="scaleX *= -1;cropimg.cropper('scaleX',scaleX)"><i class="fa fa-arrows-h" ></i>
                                        </button>
                                    <button type="button" class="btn btn-warning btn-circle" onclick="scaleY *= -1;;cropimg.cropper('scaleY',scaleY)"><i class="fa fa-arrows-v" ></i>
                                        </button> &nbsp;&nbsp;
                                    <button type="button" class="btn btn-danger btn-circle" onclick="cropimg.cropper('reset')"><i class="fa fa-refresh"></i>
                                        </button>
                                </div>
                            </form>
                        </div>
                        <!-- /.col-lg-6 (nested) -->
                        <!-- /.col-lg-6 (nested) -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-warning" onclick="fnAddFormInit();">重置</button>
                    <button type="reset" class="btn btn-default" data-dismiss="modal" id="slider-add-reset" onclick="fnAddFormInit();">关闭</button>
                    <button type="button" class="btn btn-primary submit" id="slider-add-submit">提交</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="slider-edit-modal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="editModalLabel">轮播图修改</h4>
                </div>
                <div class="modal-body" style="padding:30px;">
                    <div class="row">
                        <div class="col-lg-12">
                            <form role="form" id="slider-edit-form">
                                {{ csrf_field() }}
                                <input type="hidden" name="id" value="">
                                <div class="form-group">
                                    <label>类别</label>
                                    <select class="form-control" name="type">
                                            <option value="home" selected="selected">首页</option>
                                            <option value="login">登录页</option>
                                            <option value="register">注册页</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>标题</label>
                                    <input class="form-control" name="title" type="text">
                                </div>
                                <div class="form-group">
                                    <label>描述</label>
                                    <input class="form-control" name="intro" type="text">
                                </div>
                                <div class="form-group">
                                    <label>排序</label>
                                    <input class="form-control" name="rank" type="number" value="0">
                                </div>
                                <div class="form-group">
                                    <label style="margin-right:25px;">显示</label>
                                    <label class="radio-inline">
                                        <input type="radio" name="status" id="status-1" value="1" checked>显示
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="status" id="status-0" value="0">隐藏
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label>图片</label>
                                    <p>(欲修改请重新添加)</p>
                                    <img class="img" src="" alt="" title="">
                                </div>
                            </form>
                        </div>
                        <!-- /.col-lg-6 (nested) -->
                        <!-- /.col-lg-6 (nested) -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-default" data-dismiss="modal" id="slider-edit-reset">关闭</button>
                    <button type="button" class="btn btn-primary submit" id="slider-edit-submit">提交</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
 
@section('scripts')
<script src="{{ env('APP_STATIC') }}vendor/cropper/dist/cropper.min.js"></script>
<script src="{{ env('APP_STATIC') }}admin/js/slider.js"></script>
@endsection